<template>
  <div class="work">
    <Login></Login>
    <Header @timesetfun="timesetfun" @grabbleState="grabbleState" @grabble="grabble"></Header>
    <Footer :arr="arr"></Footer>
    <Page
      @setpage="setpage"
      @setpageSize="setpageSize"
      :page="page"
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :total="total"
    ></Page>
  </div>
</template>

<script>

import Login from "./components/Login.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import Page from "./components/Page.vue";
import { getworkData } from "../../api/workapi";
export default {
  components: { Header, Footer, Page, Login },
  data() {
    return {
      arr: [],
      valname: "", //保存搜索值
      state: "", //搜索状态值
      page: 1, //当前页码
      pageSize: 20, //每页显示多少条数据
      total: 100, //保存总数据长度
      pageSizes: [20, 40, 60, 80, 100], //默认分页
      timeinitiation: 0, //开始时间
      timeend: 0 //结束时间
    };
  },
  mounted() {
    this.initGetwork();
  },
  methods: {
    timesetfun(time) {
      //初始时间
      this.timeinitiation = time[0];
      this.timeend = time[1];
      console.log(this.timeinitiation, this.timeend);
      this.initGetwork();
    },

    setpage(val1) {
      this.page = val1;
      this.initGetwork();
    },
    setpageSize(val) {
      this.pageSize = val;
      this.initGetwork();
    },
    initGetwork() {
      getworkData({
        valname: this.valname,
        state: this.state,
        page: this.page,
        pageSize: this.pageSize,
        timeinitiation: this.timeinitiation, //发送初始时间给后端
        timeend: this.timeend
      }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.arr = res.data;
          this.total = res.total;
        }
      });
    },
    grabble(val) {
      //  接收搜索值
      this.valname = val;
      this.total = 1;
      this.initGetwork();
    },
    grabbleState(val1) {
      //搜索状态
      console.log(val1);
      this.state = val1;
      this.total = 1;
      this.initGetwork();
    }
  }
};
</script>

<style lang="less" scoped>
.work {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
}
</style>